<template>
  <div class="app-container">
    <!--顶部topbar-->
    <v-navigation-drawer
            v-model="drawer"
            fixed
            app
            class="drawer"
    >
      <user-info></user-info>
    </v-navigation-drawer>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer" v-show="isToggle"></v-toolbar-side-icon>

        <v-icon v-show="!isToggle" @click="goBack">arrow_back</v-icon>

      <v-spacer></v-spacer>
      <v-toolbar-title ref="header_title">首页</v-toolbar-title>
      <v-spacer></v-spacer>
      <span class="glyphicon glyphicon-search"></span>
      <el-dropdown trigger="click">
         <span class="el-dropdown-link" style="color: white">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
          <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </v-toolbar>

    <!--<mt-header fixed title="固定在顶部" class="header">-->
    <!--<mt-button slot="left" @click.stop="$store.state.toggleDrawers = !$store.state.toggleDrawers">-->

    <!--<img src="./images/head.jpg" style="border-radius: 50%" height="36" width="36" slot="icon"><v-toolbar-side-icon></v-toolbar-side-icon>-->
    <!--</mt-button>-->


    <!--中间部分内容区域-->
    <transition :name="transitionName" mode="out-in">

      <router-view></router-view>
    </transition>


    <!--底部tab-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/member">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span id="badge" class="mui-badge">{{this.$store.getters.getAllCount}}</span></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
    import Drawers from './components/subComponents/Drawers';
    import UserInfo from './components/subComponents/UserInfo';

    export default {
        name: 'App',
        data() {
            return {
                isToggle: true,
                drawer: null,
                sheetVisible: false,
                actions: [{ name: '第一项' }, { name: '第二项' }],
                transitionName: 'slide-left',
            };
        },
        mounted(){
          this.toggleBtn()
        },
        components: {
            UserInfo,
            Drawers,
        },
        methods: {
            goBack(){
                this.$router.go(-1)
            },
            toggleBtn(){
                let name = this.$route.name
                //判断用户是否在顶级页面，进行左上角按钮功能切换
                if (name == 'home' || name == 'member' || name == 'shopcar' || name=='search') {
                    this.isToggle = true
                } else {
                    this.isToggle = false
                }
            }
        },
        watch: {
            '$route'(to, from) {
                let title = to.meta.title
                //切换顶部标题
                this.$refs.header_title.innerText = title
                //判断用户是否在顶级页面，进行左上角按钮功能切换
                this.toggleBtn()
                //判断用户点击底部tabbar进行左右滑动切换
                if (to.meta.index > from.meta.index) {
                    this.transitionName = 'slide-right';
                } else {
                    this.transitionName = 'slide-left';
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
  .app-container {
    padding-top: 56px;
    padding-bottom: 50px;
    overflow: hidden;
    .drawer{
      z-index: 999999;
    }
    .header {
      height: 45px;
      line-height: 45px;
      z-index: 9999;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .demonstration {
      display: block;
      color: #8492a6;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

  /*向右滑动*/
  .slide-right-enter {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }

  .slide-left-enter {
    opacity: 0;
    transform: translateX(100%);
    position: absolute;
  }

  .slide-left-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }

  .slide-right-leave-to {
    opacity: 0;
    transform: translateX(100%);
    position: absolute;
  }

  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    transition: all 0.3s ease;
  }

</style>